<template>
  <div class="searchFormData">
    <el-form ref="ruleForm" :model="formData" :rules="rules">
      <el-form-item label="资源等级">
        <el-select v-model="formData.levelId" placeholder="请选择" size="small">
          <el-option
            v-for="item in LEVEL_STATE_OPTIONS"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="资源状态">
        <el-select v-model="formData.status" placeholder="请选择" size="small">
          <el-option
            v-for="item in LIST_STATE_OPTIONS"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="资源名称" prop="name">
        <el-input v-model="formData.name" clearable placeholder="请输入资源名称" size="small" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" round size="small" icon="el-icon-search" @click="search">查询</el-button>
        <el-button round size="small" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  LEVEL_STATE_OPTIONS,
  LIST_STATE_OPTIONS
} from '@/views/wxaReservationModule/views/resourceManage/config'
import {
  getAppointmentLevelLis
} from '@/api/reservation'
export default {
  name: 'Index',
  props: {
    shopId: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      rules: {},
      LIST_STATE_OPTIONS,
      LEVEL_STATE_OPTIONS,
      formData: {
        status: '',
        levelId: '',
        name: ''
      }
    }
  },
  watch: {
    shopId() {
      console.log('变化', this.shopId)
      this.fetchData()
    }
  },
  methods: {
    async fetchData() {
      const { code, data } = await getAppointmentLevelLis({ shopId: this.shopId })
      if (code === 0) {
        data.map(v => {
          v.label = v.name
          v.value = v.id
          return v
        })
        this.LEVEL_STATE_OPTIONS = data
        this.LEVEL_STATE_OPTIONS.unshift({
          value: '',
          label: '全部'
        })
      }
    },
    search() {
      this.$emit('search', this.formData)
    },
    reset() {
      this.$refs.ruleForm.resetFields()
      this.$refs.ruleForm.clearValidate()
      this.formData = {
        status: '',
        levelId: '',
        name: ''
      }
      this.$emit('reset', this.formData)
    }
  }
}
</script>

<style scoped lang="scss">
.el-form {
  display: flex;
  flex-wrap: wrap;
}
.el-form-item {
  width: 300px;
  .el-select,
  .el-input {
    width: 70%;
  }
}
</style>
